<template>
  <div class="app-container">
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="left" label="Key">
        <template slot-scope="scope">
          {{ scope.row.key }}
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.modelType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="系统" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="描述" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.description }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createdBy }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ parseTime(scope.row.created) }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="deploy(scope.row)">部署</el-button>
          <el-divider direction="vertical" />
          <el-button type="text" size="small">编辑</el-button>
          <el-divider direction="vertical" />
          <el-button type="text" size="small">查看XML</el-button>
          <el-divider direction="vertical" />
          <el-button type="text" size="small" @click="imgPreview(scope.row)">查看图片</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--图片预览-->
    <el-dialog
      title="图片预览"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-image :src="processImg" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from '@/api/table'
import { deploy } from '../../api/engine'
import { parseTime } from '@/utils'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      dialogVisible: false,
      processImg: '',
      list: [],
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    parseTime,
    fetchData() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.total = response.data.data.total
        this.list = response.data.data.rows
        this.listLoading = false
      })
    },
    deploy(record) {
      deploy(record.id).then(response => {
        const result = response.data
        if (result.code === '100') {
          this.fetchData()
          this.$message.success(result.msg)
        }
      })
    },
    imgPreview(record) {
      this.dialogVisible = true
      this.processImg = `/server/rest/model/loadPngByModelId/${record.id}`
    }
  }
}
</script>
